<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <div class="consult_tab">
            <NewCard :title="$route.meta.title" :isright="isright">
              <template slot="right">
                <div class="topRight">
                  <el-input v-model="topSearchValue" placeholder="请输入项目名称" class="topSearch" @input="changeValue" @focus="focusInput" @blur="blurInput" ref="topSearch">
                    <i slot="suffix">
                      <svg-icon icon-class="ss_icon" />
                    </i>
                  </el-input>
                  <div class="topSearchFind" v-show="searchFindShow">
                    <ul>
                      <!-- 一级 -->
                      <li v-for="(list,index) in allList" :key="list.id" @mousedown.prevent="clickSearchList(list,index)">
                        {{list.name}}
                      </li>
                    </ul>
                  </div>
                </div>
              </template>

              <div class="tabOne">
                <div
                  class="tablist"
                  v-for="(f1, index) in list"
                  :key="f1.id"
                  :class="firstId == index + 1? 'isActive' : ''"
                  @click="clickFirst(f1,index)"
                  ref="tablist">
                  <img :src="f1.icon1" class="imgnor" />
                  <img :src="f1.icon2" class="imgsel" />
                  <el-button round>{{ f1.name }}</el-button>
                </div>
              </div>

              <div class="tabTwo">
                <p class="tabTitle">二级类型</p>
                <ul>
                  <li
                    v-for="s in secondary"
                    :key="s.id"
                    :class="[s.id === secondaryId ? 'isSecon' : '']"
                    @click="clickSecon(s)"
                  >
                    <img :src="s.icon1" alt="" />
                    <p>{{ s.name }}</p>
                  </li>
                </ul>
              </div>

              <div class="tabThree" v-if="threeList.length">
                <p class="tabTitle">三级类型</p>
                <ul>
                  <li 
                    v-for="t in threeList" 
                    :key="t.id" 
                    @click="clickThree(t)" 
                    :class="t.id==currenSelect.id?'isActive':''">
                    <img :src="t.icon1" alt="" />
                    <div class="threeTxt">
                      <p>{{ t.name }}</p>
                      <span>{{ t.describable }}</span>
                    </div>
                  </li>
                </ul>
              </div>

              <!-- gif图片展示 -->
              <!-- <div class="slogan" v-else>
                <div class="gif">
                  <img src="https://wensanshi.oss-cn-shenzhen.aliyuncs.com/images/static/20220909-115231.gif" alt="">
                </div>
                <div class="text">
                  <div class="cn">
                    受托必达
                  </div>
                  <div class="en">
                    Trusted Bida
                  </div>
                </div>
              </div> -->
              <!-- gif图片展示 end-->

            </NewCard>
          </div>
        </el-col>
        <el-col :span="14">
            <div class="FeaturedContent" v-if="flowShow == 1">
                <FeaturedContent></FeaturedContent>
            </div>
            <div class="flow" v-else-if="flowShow == 2">
                <Flow 
                    :firstName="firstName"
                    :secondaryName="secondaryName"
                    :threeName="threeName"
                    :currentDetail="currenSelect">
                </Flow>
            </div>
            <div class="pay" v-else>
              <Pay
                :project="project"
                :orderinfo="orderinfo"
                :step="step"
                :flowId="flowId">
              </Pay>
            </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import router from '@/router/index.js'
import Flow from "./flow";
import FeaturedContent from "@/components/FeaturedContent"
import Pay from "./Pay.vue"
import NewCard from "@/wss/components/newCard.vue";

import {
  getProjectTypelistApi,
  getFindProjectTypelistApi,
} from "@/wss/newApi_3-24/work/projectType.js";
import {getLoanProjectTypeIdApi} from "@/wss/newApi_3-24/tool/loan.js"
export default {
  name: "Project",
  components: { NewCard, Flow, FeaturedContent,Pay},
  data() {
    return {
      isright:true,//显示搜索框
      allList:[],// 用于过滤的全部类型数据
      filterList:[],// 过滤出来的数据
      topSearchValue:'',//搜索框输入的值
      searchFindShow:false,//搜索发现显示隐藏
      
      //分页参数
      pageing: { pageNum: 1, pageSize: 100 },
      list: [], //所有类别的数据
      firstList: [], //一级类别的列表
      firstId: "", //当前选中的一级Id
      firstName: "", //当前选中的一级名称
      firstData: {},//当前选择的一级类别的数据

      secondary: [], //二级类别的列表
      secondaryId: "", //当前选中的二级类型id
      secondaryName: "", //当前选中的二级名称

      threeList: [], //三级类别的列表
      threeId: "", //当前选中的三级类型id
      threeName: "", //当前选中的三级名称

      projectType1:'',// 智慧贷款一级id
      projectType2:'',// 智慧贷款二级id

      currenSelect:{},

      flowShow: 2, //1推荐内容 2流程步骤显示隐藏（2收银台显示隐藏）
      limit: 6, //上传附件最多数量
      //提交信息集合
      formdata: {
        question: "",
        fileList: [],
        typeId: "",
        type: "",
        firstName: "",
        secondaryName: "",
        threeName: "",
      },

      project: {},//发送给支付页面的数据
      orderinfo: {},//订单信息
      step:[],//步骤的数据
      flowId: '',// 当前下单的步骤id

    };
  },
  filters: {},
  async mounted() {
    this.firstId = this.$route.meta.id
    await this.getLoanProjectTypeId()// 查询智慧贷款的一级id和二级id
    await this.getProjectTypelist(); //加载所有类别

    //修改右侧显示的状态
    this.$bus.$on('handlerPay',(num,project,orderinfo,step,flowId)=>{
      this.flowShow = num
      this.project = project
      this.orderinfo = orderinfo
      this.step = step
      this.flowId = flowId
    })
    
    // 支付时间到跳转回推荐页
    this.$bus.$on('returnFeat',(num)=>{
      this.flowShow = num
    })

    // 路由传参 点击轮播图
    if(this.$route.query.typeId){
      let typeId = this.$route.query.typeId
      let arr = typeId.split(',') //二级类型id和三级类型id
      // 过滤出当前二级类型id下的三级类型列表
      let second = this.secondary.find(item=>{
        return item.id == arr[0]
      })
      this.secondaryId = second.id //二级类型id
      this.secondaryName = second.name //二级类型名称

      this.threeList = second.children //当前的三级类型列表
      this.threeId = arr[1] //三级类型的id 
      this.currenSelect = this.threeList.find(k=>{
        return k.id == arr[1]
      })
      this.threeName = this.currenSelect.name
    }
    // 路由传参 点击轮播图end
    
  },

  computed: {
  },

  methods: {
    //输入框改变的时候过滤
    changeValue(){
      //过滤数据 this.topSearchValue
      this.allList = this.filterList.filter(item=>item.name.includes(this.topSearchValue))
    },

    //点击搜索发现的某一条
    clickSearchList(list,index){
      if(list.type == "1"){
        let nowId = this.$route.path.split('/')[2]
        if(list.id != nowId){
          this.$router.push({path:`/Bm-project/${list.id}`})
        }
      }else if(list.type == "2"){
        // 如果当前选中的二级类型不在当前页面，那就跳转到对应的页面，拼接typeId=二级类型id和三级类型id
        let indexType = this.secondary.findIndex((item) => item.id == list.id);
        if(indexType == -1){
          // 等于-1就说明在别的页面要跳转
          let twoid = list.id
          let threeId = list.children[0].id
          let typeId = `${twoid},${threeId}`
          this.$router.push({
            path:`/Bm-project/${list.pid}`,
            query: {typeId}
          })
        }else{
          // 不等于-1就说明在当前页面
          this.clickSecon(list,index)
        }
      }else{
        // 把当前二级类型的三级合并起来
        let threeList = []
        this.secondary.forEach(item=>{
          if(item.children){
            item.children.forEach(k=>{
              threeList.push(k)
            })
          }
        })
        // 如果当前选中的三级类型不在当前页面，那就跳转到对应的页面，拼接typeId=二级类型id和三级类型id
        let indexType = threeList.findIndex((item) => item.id == list.id);
        if(indexType == -1){
          // 获取当前这一条三级类型的父二级类型
          let twoObj = this.filterList.find(item=>{
            return item.id == list.pid
          })
          let oneId = twoObj.pid
          let typeId = `${twoObj.id},${list.id}`
          this.$router.push({
            path:`/Bm-project/${oneId}`,
            query: {typeId}
          })
        }else{
          this.clickThree(list)
        }
      }
    },

    //搜索框激活状态
    focusInput(){
      //显示搜索发现
      this.searchFindShow=true
    },

    //搜索框失去焦点
    blurInput(){
      //隐藏搜索发现
      this.searchFindShow=false
    },

    getactive(getactive) {
      return getactive == this.firstList ? "active" : "";
    },

    //获取项目类型列表
    async getProjectTypelist() {
      let result = await getFindProjectTypelistApi();
      if (result.code == 200) {
        this.list = result.rows;
        // this.firstName = result.rows[0].name;
        this.formdata = {};

        //路由参数（默认选中哪一项）
        let defaultArr = this.$route.path.split('/')
        let defaultId = defaultArr[defaultArr.length-1]
        let defaultObj = this.list.find(item=>{
          return item.id == defaultId
        })
        this.firstName = defaultObj.name
        this.firstData = defaultObj //当前选择的一级类别的数据
        //路由参数（默认选中哪一项）

        //默认选中的一级
        let seconObj = this.list.find(item=>{
          return item.id == this.$route.meta.id
        })

        this.secondary = seconObj.children //二级类型
        if(this.secondary && this.secondary[0]?.id){
          this.secondaryId = this.secondary[0]?.id //二级类型id
          this.secondaryName = this.secondary[0]?.name //获取二级类型名称
          this.threeList = this.secondary[0]?.children //三级类型
        }

        // 默认选中第一个三级类型 
        if(this.threeList && this.threeList[0]){
          this.currenSelect = this.threeList[0]
          this.threeName = this.currenSelect.name

          // 清空三级 显示gif
          // this.threeList = []
        }

        // 用于过滤-----------------------
        // 获取全部一级类型
        let oneType = []
        this.list.forEach(item=>{
          oneType.push(item)
        })
        // 获取全部二级类型
        let secondType = []
        this.list.forEach(item=>{
          if(item.children){
            item.children.forEach(k=>{
              secondType.push(k)

            })
          }
        })
        let threeType = [] //全部三级类型
        secondType.forEach(item=>{
          if(item.children){
            item.children.forEach(i => {
              threeType.push(i)
            });
          }
        })
        let arrPType = [...oneType,...secondType,...threeType]
        // 把智慧贷款的一级二级三级过滤掉
        let newArr = arrPType.filter(item => {
          return item.id != this.projectType1 && item.id != this.projectType2 && item.pid != this.projectType2
        });
        this.allList = newArr
        this.filterList = this.allList
        // 用于过滤-----------------------end

        // this.filterList 用于过滤的全部类型数据 -----------------------之前的
        // this.filterList = this.list
        // let l2 = []
        // let l3 = []
        // this.list.forEach(i=>{
        //   if(i.children){
        //     i.children.forEach(k=>l2.push(k))
        //   }
        // })
        // l2.forEach(c1=>{
        //   if(c1.children){
        //     c1.children.forEach(c2=>l3.push(c2))
        //   }
        // })

        // this.filterList = [...this.filterList,...l2,...l3]
        //全部类型数据
        // this.allList = this.filterList
        // this.filterList 用于过滤的全部类型数据 -----------------------之前的end
        
      }
    },

    // 查询智慧贷款的一级id和二级id
    async getLoanProjectTypeId(){
        let result = await getLoanProjectTypeIdApi()
        if(result.code==200){
            this.projectType1 = result.projectType1
            this.projectType2 = result.projectType2
        }
    },

    //点击一级类别
    clickFirst(f1,index) {
      //隐藏搜索发现
      this.$refs.topSearch.blur();
      this.searchFindShow=false

      this.firstId = index+1;
      this.firstName = f1.name;

      // 显示推荐页
      this.flowShow = 1

      //过滤出二级类别
      this.secondary = this.list.filter((item) => item.id == f1.id)[0].children;
      //置空三级类别
      this.threeList = [];
      this.secondaryName = "";
      this.threeName = "";
        
    },

    //点击二级类别
    clickSecon(s) {
      //隐藏搜索发现
      this.$refs.topSearch.blur();
      this.searchFindShow=false

      this.secondaryId = s.id;
      this.secondaryName = s.name;

      // 显示推荐页
      // this.flowShow = 1

      //过滤出三级类别
      this.threeList = this.secondary.filter(
        (item) => item.id == s.id
      )[0].children;
      this.threeName = "";

      // 默认选中第一个三级类型
      this.currenSelect = this.threeList[0]
      this.threeName = this.currenSelect.name
    },

    //点击三级类别
    clickThree(t) {
      //隐藏搜索发现
      this.$refs.topSearch.blur();
      this.searchFindShow=false

      // 过滤出当前三级类别的二级类别
      let newSecond = this.secondary.find(item=>{
        return item.id == t.pid
      })
      this.secondaryId = newSecond.id  //二级类型id
      this.secondaryName = newSecond.name //二级类型名字
      this.threeList = newSecond.children //三级类型列表
      // 过滤出当前三级类别的二级类别 end

      // 显示步骤页
      this.flowShow=2

      this.formdata.type = t.name;
      this.formdata.typeId = t.id;
      this.threeId = t.id;
      this.threeName = t.name;

      // 当前选中的三级类型
      this.currenSelect=t
    },

  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .el-card__body {
  position: relative;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 子組件處理 */

/* 顶部右边搜索 */
.topRight{
  position: relative;
}
.topSearch{
  width: 220px;
}
::v-deep .topSearch .el-input__suffix{
  right: 15px;
}
.topSearch i{
  display: inline-block;
  font-size: 16px;
  margin-top: 7px;
}
::v-deep .topSearch .el-input__inner{
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
}
::v-deep .topSearch .el-input__inner:focus{
  border: 2px solid #F87A23;
  border-radius: 18px 18px 0 0;
  border-bottom: 1px solid #EFEFEF;
}
.topSearchFind{
  position: absolute;
  width: 100%;
  border: 2px solid #F87A23;
  border-top: 0;
  background-color: #fff;
  border-radius: 0 0 18px 18px;
  padding: 10px 0;
  z-index: 999;
  overflow: hidden;
}
.topSearchFind ul{
  max-height: 200px;
  overflow-y: auto;
}
.topSearchFind ul>li{
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  font-size: 14px;
  line-height: 34px;
  font-weight: 400;
  color: #333333;
  cursor: pointer;
  transition: all 0.3s;
}
.topSearchFind ul>li:hover{
  background-color: #F4F5F8;
  color: #F87A23;
}
.topSearchFind ul>li>span{
  font-size: 12px;
  color: #999;
}
/* 顶部右边搜索 end*/

/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-top: 15px;
  display: none;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist img {
  width: 36px;
}
.tabOne .tablist img.imgsel {
  display: none;
}
.tabOne .tablist.isActive img.imgsel,
.tabOne .tablist.isCheck img.imgsel {
  display: block;
}
.tabOne .tablist.isActive img.imgnor,
.tabOne .tablist.isCheck img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  font-weight: bold;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist.isCheck button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #39486f;
  border-color: #39486f;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}
.tabOne .tablist.isActive {
  color: red;
}

/* 二级 */
.tabTitle {
  font-size: 12px;
  color: #999;
  margin: 20px 0;
}
.tabTwo ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tabTwo ul > li {
  width: 21%;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  color: #333;
  border-bottom: 2px solid #fff;
  cursor: pointer;
}
.tabTwo ul > li > p {
  margin: 10px 0;
}
.tabTwo ul > li > img {
  display: block;
  width: 56px;
  height: 60px;
  margin: 0 auto;
}
.tabTwo ul > li.isSecon {
  color: #f87a23;
  font-weight: bold;
  border-bottom-color: #f87a23;
}
.tabTwo ul > li:hover {
  color: #f87a23;
  font-weight: bold;
}

/* 三级类型 */
.tabThree ul {
  width: 100%;
}
.tabThree ul > li {
  display: flex;
  padding: 15px;
  border: 1px solid #efefef;
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
}
.tabThree ul > li img {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  margin-top: 2px;
}
.tabThree ul > li p {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}
.tabThree ul > li span {
  font-size: 12px;
  color: #999;
}
.tabThree ul > li:hover,
.tabThree ul > li.isActive {
  background-color: #f4f5f8;
  border-color: #f4f5f8;
}
.tabThree ul > li:hover p,
.tabThree ul > li.isActive p {
  color: #f87a23;
}
.problem h3 {
  font-size: 20px;
  font-weight: bold;
}
.problem h3 > i {
  color: #f87a23;
}
.problem h3 > span {
  font-size: 12px;
  color: #f87a23;
}
::v-deep .problem textarea {
  font-family: "微软雅黑";
  border-radius: 12px;
}

/* 附件 */
.accessory {
  margin-bottom: 80px;
}
.accessory h3 {
  font-weight: bold;
}
.accessory .uploadBtn {
  display: flex;
  align-items: center;
}
.accessory .uploadBtn .el-button {
  margin-right: 15px;
  border: 2px solid #d7d7d7;
  font-size: 14px;
  font-weight: bold;
  padding: 9px 20px;
}
.accessory .uploadBtn .el-button:hover {
  color: #fff;
  background-color: #f87a23;
  border-color: #f87a23;
}
.accessory .el-upload__tip {
  margin-top: 0;
  color: #bababa;
}
::v-deep .accessory .el-upload-list__item {
  border-bottom: 1px solid #efefef;
  padding-bottom: 10px;
}
::v-deep .accessory .el-upload-list__item:hover {
  background-color: transparent;
}
::v-deep .accessory .el-upload-list__item-name:hover {
  color: #f87a23;
}
.active {
  color: red;
}
/* 提交按钮 */
.submitBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: right;
  border-top: 1px solid #ecedf0;
  background-color: #fff;
  padding: 20px 20px;
}
.submitBtn button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 70px;
}
</style>
<style scoped>
/* 响应式 */
@media (max-width: 1120px) {
  .topSearch{
    width: 150px;
  }

  .tabTwo ul > li{
    margin-bottom: 10px;
  }
  .tabTwo ul > li > p{
    margin: 8px 0;
  }
  .tabTwo ul > li > img{
    width: 42px;
    height: auto;
  }

  .tabThree ul > li{
    padding: 10px 15px;
  }
}
</style>

<style lang="scss" scoped>
// gif表情
.slogan{
	padding-top: 20px;
	padding-bottom: 100px;
	text-align: center;
	
	.gif{
		// padding-top:50rpx;
	}
	.gif img{
		width: 150px;
		margin: 0 auto;
	}
	.text{
		// padding-top:50rpx;
		text-transform:uppercase;
		.cn{
			font-size: 40px;
			color: rgb(246, 246, 247)
		}
		.en{
			font-size: 14px;
			color: rgb(246, 246, 247)
		}
	}
	.text img{
		width: 551px;
		height: 116px;
		margin: 0 atuo;
	}
}
</style>